@acctglobal/skeleton

Installation

yarn add @acctglobal/skeleton
npm install @acctglobal/skeleton

import { Skeleton } from '@acctglobal/skeleton'
import '@acctglobal/skeleton/src/styles/animation.css' // Import if you want to use animation prop

<Skeleton /> // Simple, single-line loading skeleton
<Skeleton count={5} /> // Five-lines loading skeleton
<Skeleton table={ rows: 4, columns: 4 } /> // Four-rows and four-columns loading skeleton table
<Skeleton responsiveImage={{ srcWidth: 1280, srcHeight: 650 }} /> // A fake responsive image with 1280px x 650px originally

Pre-defined classes

The Skeleton can be fully customized from props. But if you want something even more specific, you can use the predefined classes. Are they:

• skeleton-container (the outermost level of skeleton);
• skeleton-wrapper (the wrappers generated from the prop count);
• skeleton-table (the table generated from the prop table);
• skeleton-animation (the div generated from the prop animation).

Props Reference

All props are optional

Prop	Type	Default	Description
width	number - string		Sets the width of the container/wrapper/table
height	number - string	1em	Sets the height of the container/wrapper
margin	number - 'auto'		Sets the margin of container/wrapper/cell table
padding	number		Sets the padding of container/wrapper
border	boolean		Activate the border in container/wrapper/cell table
borderColor	string	#000	Sets the border color
borderRadius	number		Sets the border radius
circle	boolean		Sets the border radius in50%
backgroundColor	string	#ccc	Sets the background color
color	string	#000	Sets the color of placeholder
cursor	boolean		Sets the cursor for progress
placeholder	string		Sets the placeholder in container/wrapper
placeholderPosition	{horizontal:left-center-right , vertical:top-center-bottom}		Sets the position of placeholder
animation	boolean		Activate the loading animation
animationColor	string	#ddd	Sets the loading color animation
animationDuration	number	3000	Sets the time (ms) for the animation complete a cycle
count	number		Sets the amount of wrappers that will be render
responsiveImage	{srcWidth:number , srcHeight:number} - [{srcWidth:number , srcHeight:number , breakIn?:number}]		Sets a responsive image with the defined height and width. It also accepts an array with several images with defined breakpoints. For SSR use the next prop
responsiveImageSSR	{srcWidth:number , srcHeight:number}		Sets a responsive image with the defined height and width
table	{rows:number , columns:number}		Sets the number of rows and columns in the table

Examples

Wrappers in Skeleton

The default height of wrappers is 1em, but you can change using the prop height.

const BlogPost = (props) => {
  return (
    <div>
      <h1>
        {props.title || (
          <Skeleton
            height="2em"
            placeholder="Loading..."
            placeholderPosition={{ horizontal: 'center', vertical: 'center' }}
            animation
          />
        )}
      </h1>
      {props.body || <Skeleton count={10} animation />}
    </div>
  )
}

Table in Skeleton

Generate tables while yours does not load:

const BlogPost = (props) => {
  return props.myCells.lenght > 0 ? (
    <table>
      <tbody>
        <tr>
          <td>{props.myCells[0]}</td>
          <td>{props.myCells[1]}</td>
          <td>{props.myCells[2]}</td>
        </tr>
        <tr>
          <td>{props.myCells[3]}</td>
          <td>{props.myCells[4]}</td>
          <td>{props.myCells[5]}</td>
        </tr>
        <tr>
          <td>{props.myCells[6]}</td>
          <td>{props.myCells[7]}</td>
          <td>{props.myCells[8]}</td>
        </tr>
      </tbody>
    </table>
  ) : (
    <Skeleton table={{ rows: 3, columns: 3 }} animation />
  )
}

Responsive Images in Skeleton

You can also generate several responsive images, with defined breakpoints (no limits for the number of responsive images):

const BlogPost = (props) => {
  return props.image ? (
    <img
      src={
        props.myScreenWidth <= 768 ? props.image.mobile : props.image.desktop
      }
      alt={props.imageTitle}
      width="100%"
    />
  ) : (
    <Skeleton
      responsiveImage={[
        { srcWidth: 400, srcHeight: 300, breakIn: 768 },
        { srcWidth: 1980, srcHeight: 720 }
      ]}
      animation
    />
  )
}

If you are using SSR and need to render different images for each viewport type, you can render multiple skeletons and style them with css. it's not possible to use the user's screen size in the SSR, but using the media query it works normally. Follow this example:

import './style.scss'

const BlogPost = (props) => {
  if (typeof window === 'undefined') {
    return (
      <div className="loading">
        <Skeleton responsiveImageSSR={{ srcWidth: 320, srcHeight: 212 }} />
        <Skeleton responsiveImageSSR={{ srcWidth: 1920, srcHeight: 632 }} />
      </div>
    )
  }

  if (typeof window !== 'undefined') {
    return (
      <img
        src={width < 768 ? props.image.mobile : props.image.desktop}
        alt={props.imageTitle}
        width="100%"
      />
    )
  }
}

.loading {
  .skeleton-container:nth-child(1) {
    @media (min-width: 768px) {
      display: none;
    }
  }

  .skeleton-container:nth-child(2) {
    @media (max-width: 767px) {
      display: none;
    }
  }
}

The props placeholderPosition and animation don't working corretly with SSR. Wait for more atts. Animation working with SSR.